// src/components/sponsorDashboard/mainContent/Overview.tsx

import { useState } from 'react';
import { FaChartBar, FaBuilding, FaGift, FaGraduationCap } from 'react-icons/fa';
import SponsorCountByProgramModal from '@/components/popups/sponsorOverview/sponsorCountByProgram/SponsorCountByProgramModal';
import CompanyContactsModal from '@/components/popups/sponsorOverview/companyContactsList/CompanyContactsModal';
import ScholarshipsByCompanyModal from '@/components/popups/sponsorOverview/scholarshipsByCompany/ScholarshipsByCompanyModal';
import ScholarshipsByProgramModal from '@/components/popups/sponsorOverview/scholarshipsByProgram/ScholarshipsByProgramModal';

const Overview = () => {
  const [showSponsorCountModal, setShowSponsorCountModal] = useState(false);
  const [showCompanyContactsModal, setShowCompanyContactsModal] = useState(false);
  const [showScholarshipsCompanyModal, setShowScholarshipsCompanyModal] = useState(false);
  const [showScholarshipsProgramModal, setShowScholarshipsProgramModal] = useState(false);

  const cardClass =
    'flex flex-col items-center justify-center w-full max-w-xs sm:max-w-sm md:max-w-md h-48 sm:h-56 md:h-60 px-6 sm:px-8 md:px-10 py-8 sm:py-10 md:py-12 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-2xl shadow-lg hover:shadow-2xl hover:border-blue-400 dark:hover:border-cyan-700 transition-all duration-300 transform hover:-translate-y-2 hover:scale-105 cursor-pointer text-center group';

  const iconStyle = 'text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-blue-500 dark:text-cyan-400 mb-6 drop-shadow-sm group-hover:text-blue-600 dark:group-hover:text-cyan-300 transition-all duration-300 group-hover:scale-110';
  const titleStyle = 'text-lg sm:text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-100 group-hover:text-blue-700 dark:group-hover:text-cyan-300 transition-all duration-300 mb-2';
  const subtitleStyle = 'text-sm sm:text-base md:text-lg text-gray-500 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-cyan-300 transition-all duration-300';

  return (
    <div className="py-8 sm:py-12 md:py-16 px-4 sm:px-6 md:px-8 max-w-5xl mx-auto">
      <div className="mb-12 text-center">
        <h1 className="font-extrabold text-gray-900 dark:text-cyan-300 mb-4 tracking-tight drop-shadow-sm text-xl sm:text-2xl md:text-3xl lg:text-4xl">
          Sponsors Data Overview
        </h1>
        <p className="text-gray-600 dark:text-gray-300 max-w-3xl mx-auto text-sm sm:text-base md:text-lg leading-relaxed">
          Explore sponsorship-related statistics, including program participation, scholarship distributions, and company contact details with comprehensive analytics.
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8 md:gap-10 justify-center items-center place-items-center">
        <div onClick={() => setShowSponsorCountModal(true)} className={`${cardClass} group`}>
          <FaChartBar className={iconStyle} />
          <div>
            <div className={titleStyle}>Sponsor Count</div>
            <div className={subtitleStyle}>by Program</div>
          </div>
        </div>

        <div onClick={() => setShowCompanyContactsModal(true)} className={`${cardClass} group`}>
          <FaBuilding className={iconStyle} />
          <div>
            <div className={titleStyle}>Company & Contacts</div>
            <div className={subtitleStyle}>Full List View</div>
          </div>
        </div>

        <div onClick={() => setShowScholarshipsCompanyModal(true)} className={`${cardClass} group`}>
          <FaGift className={iconStyle} />
          <div>
            <div className={titleStyle}>Scholarships</div>
            <div className={subtitleStyle}>by Company</div>
          </div>
        </div>

        <div onClick={() => setShowScholarshipsProgramModal(true)} className={`${cardClass} group`}>
          <FaGraduationCap className={iconStyle} />
          <div>
            <div className={titleStyle}>Scholarships</div>
            <div className={subtitleStyle}>by Program</div>
          </div>
        </div>
      </div>

      {showSponsorCountModal && (
        <SponsorCountByProgramModal onClose={() => setShowSponsorCountModal(false)} />
      )}
      {showCompanyContactsModal && (
        <CompanyContactsModal onClose={() => setShowCompanyContactsModal(false)} />
      )}
      {showScholarshipsCompanyModal && (
        <ScholarshipsByCompanyModal onClose={() => setShowScholarshipsCompanyModal(false)} />
      )}
      {showScholarshipsProgramModal && (
        <ScholarshipsByProgramModal onClose={() => setShowScholarshipsProgramModal(false)} />
      )}
    </div>
  );
};

export default Overview;